<template>
  <!-- 缺陷管理 -->
  <div class="defect-management-box">
    <table />
    <div class="plan-header-box">
      <div class="subtitle-box startbox">
        <!-- <div class="icon"></div> -->
        <div class="name">缺陷管理</div>
      </div>
    </div>
    <div class="filter-box">
      <div class="filter-1">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="120px"
          class="elform"
        >
          <el-row :gutter="25">
            <el-col :span="4">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="所属地市:" prop="time">
                    <el-select
                      v-model="formData.Company"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in CompanyList"
                        :key="item.index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="变电站名称:" prop="time">
                    <el-select
                      v-model="formData.Substation"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in SubstationList"
                        :key="item.index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="变电站名称:">
                    <el-input v-model="formData.substation_value"
                              placeholder="请输入内容"
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>-->
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检区域:" prop="source">
                    <el-input
                      v-model="formData.inspectionArea"
                      placeholder="请输入内容"
                      :style="{width: '100%'}"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="间隔单元:" prop="area">
                    <el-input
                      v-model="formData.bayUnit"
                      placeholder="请输入内容"
                      :style="{width: '100%'}"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="设备名称:" prop="area">
                    <el-input
                      v-model="formData.equipment"
                      placeholder="请输入内容"
                      :style="{width: '100%'}"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24"></el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="巡检点位:" prop="time">
                    <el-input
                      v-model="formData.inspectionPoint"
                      placeholder="请输入内容"
                      :style="{width: '100%'}"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="25">
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检方式:" prop="area">
                    <el-select
                      v-model="formData.Xsfs"
                      size="small"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in XsfsList"
                        :key="item.index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="是否消缺:" prop="source">
                    <el-select
                      v-model="formData.isClear"
                      size="small"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in isClearList"
                        :key="item.index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="发现时间:" prop="source">
                    <el-date-picker
                      :style="{width: '100%'}"
                      v-model="formData.findtime"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-button
                    type="primary"
                    @click="submitForm"
                    class="centerbox conditionQuryBtn btn"
                    icon="el-icon-search"
                  >查询</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button
                    type="primary"
                    @click="addlistevent"
                    class="centerbox conditionQuryBtn"
                  >发起缺陷</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
      <div class="bottom-border"></div>

    <div class="self-table bigTableStyle">
      <el-table
      border
        :data="tableData"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        style="width:100%"
        height="100%"
      >
      <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="NUM" label="序号" :show-overflow-tooltip="true" width="60"></el-table-column>
        <el-table-column prop="SSDSMC" label="所属地市" :show-overflow-tooltip="true" width="160"></el-table-column>
        <el-table-column prop="BDZMC" label="变电站名称" :show-overflow-tooltip="true" width="160"></el-table-column>
        <el-table-column prop="ROOMNAME" label="巡检区域" :show-overflow-tooltip="true" width="140"></el-table-column>
        <el-table-column prop="JGMC" label="间隔单元" :show-overflow-tooltip="true" width="280"></el-table-column>
        <el-table-column prop="SBMC" label="设备名称" :show-overflow-tooltip="true" width="300"></el-table-column>
        <el-table-column prop="XJDW" label="巡检点位" :show-overflow-tooltip="true" width="300"></el-table-column>
        <el-table-column prop="XSFS" label="巡检方式" :show-overflow-tooltip="true" width="180"></el-table-column>
        <el-table-column prop="DJSJ" label="登记时间" :show-overflow-tooltip="true" width="180"></el-table-column>
        <el-table-column prop="JCSJ" label="发现时间" :show-overflow-tooltip="true" width="180"></el-table-column>
        <el-table-column prop="QXBH" label="缺陷编号" :show-overflow-tooltip="true" width="180"></el-table-column>
        <!-- <el-table-column prop="abnormalInfo" label="异常信息" :show-overflow-tooltip="true" width="180">
          <template slot-scope>
            <div class="iconfont iconpicture" @click="abnormalevent" style="cursor: pointer;"></div>
          </template>
        </el-table-column>-->
        <el-table-column prop="XQFLAG" label="是否消缺" :show-overflow-tooltip="true" width="120"></el-table-column>
      </el-table>
    </div>
    <div class="self-pagination elPaginationStyle centerbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
    <el-dialog
      title="缺陷登记"
      top="20vh"
      :visible.sync="addlist"
      width="65%"
      :before-close="addlistClose"
    >
      <addlistmodules :tableSelect="tableSelect" @close="addlistClose" v-if="addlist" />
    </el-dialog>
    <el-dialog
      title="异常信息"
      top="20vh"
      :visible.sync="abnormal"
      width="65%"
      height="65%"
      :before-close="abnormalClose"
    >
      <div class="abnormal">
        <img
          class="abnormal-img"
          src="../../../../assets/img/JointInspection/xjjh_subtitle_icon.png"
          alt
        />
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import addlistmodules from "./modules/addlistmodules.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
//loadsh
import lodash from "lodash";
interface optionList {
  value: string;
  label: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component({
  components: {
    addlistmodules,
  },
})
export default class extends Vue {
  // 弹框状态
  public dialogVisible: boolean = false;
  public management_dialogVisible: boolean = false;
  public cancel_dialogVisible: boolean = false;
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
  // 下拉框巡检方式
  get XsfsList() {
    let XsfsList = JointInspectionModule.getXsfsList || [];
    return XsfsList;
  }
  // 是否消缺
  isClearList = [
    {
      code: "",
      name: "全部",
    },
    {
      code: "0",
      name: "否",
    },
    {
      code: "1",
      name: "是",
    },
  ];
  //table表格相关事件数据
  tableData = [
    // {
    //   SSDSMC: "国家电网供电公司",
    //   substation: "110Kv变电站",
    //   inspectionArea: "主控室",
    //   bayUnit: "110kV线路及母联",
    //   equipment: "王泉线组合电器",
    //   inspectionPosi: "王泉线组合电器212-2刀",
    //   inspectionType: "",
    //   bookingDate: "",
    //   detectDate: "",
    //   deaultNo: "",
    //   abnormalInfo: "",
    //   isElimination: "是",
    // },
  ];
  tableSelect: any = [];
  //搜索框from表单数据
  formData = {
    Company: "", //所属地市
    Substation: "", //变电站名称
    inspectionArea: "", //巡检区域
    bayUnit: "", //间隔单元
    equipment: "", //设备名称
    inspectionPoint: "", //巡检点位
    Xsfs: "", //巡检方式
    isClear: "", //是否消缺
    findtime: [], //发现时间
  };
  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  pickerOptions = {
    shortcuts: [
      {
        text: "最近一周",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近一个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近三个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit("pick", [start, end]);
        },
      },
    ],
  };
  $refs!: {
    elForm: any;
  };
  // 查询
  submitForm() {
    // console.log("CompanyList:",this.CompanyList)
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log("this.formData:", this.formData);
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }
  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      // this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }

  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      // station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData.cleartime:", this.formData.cleartime);
    let form = {
      bdzmc: this.formData.Substation, // 变电站ID
      findstart:
        this.formData.findtime == null ? "" : this.formData.findtime[0], // 发现开始时间
      findend: this.formData.findtime == null ? "" : this.formData.findtime[1], // 发现结束时间
      jgdy: this.formData.bayUnit, // 间隔单元
      page: this.pages.page, // 第几页
      roomname: this.formData.inspectionArea, // 巡检区域
      rows: this.pages.pageSize, // 每页条数
      sbmc: this.formData.equipment, // 设备名称
      sfxq: this.formData.isClear, // 是否消缺
      xjdw: this.formData.inspectionPoint, // 巡检点位
      xsfs: this.formData.Xsfs, // 巡检方式
    };
    // console.log("this.formData:",this.formData);
    // console.log("form:",form);
    (this as any).$services
      .getQxglDetail({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("缺陷管理列表查询:", result);
        let data = result.data;
        this.tableData = data.rows;
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 表格选择事件
  handleSelectionChange(val: any): void {
    console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }

  // 提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      duration: 0,
      showClose: true,
      type: "warning",
    });
  }

  //弹窗相关
  addlist = false;
  addlistevent() {
    console.log(this.tableSelect);

    if (this.tableSelect.length == 0) {
      this.$message({ type: "warning", message: "至少选择一条信息记录！" });
      return;
    }
    if (this.tableSelect.length > 1) {
      this.$message({ type: "warning", message: "只能勾选一条信息记录！" });
      return;
    }
    if (this.tableSelect[0].QXBH) {
      this.$message({
        type: "warning",
        message: "选择记录中存在已产生缺陷编号记录信息！",
      });
    } else {
      this.addlist = true;
    }
  }
  addlistClose() {
    this.addlist = false;
    this.queryAuxRealtimeList();
  }
  abnormal = false;
  abnormalevent() {
    this.abnormal = true;
  }
  abnormalClose() {
    this.abnormal = false;
  }

  //返回按钮
  goBack() {
    window.history.back();
  }
  newAdd(): void {
    // console.log("新增");
  }
  delet(): void {
    // console.log("删除");
  }
  taskRelease(): void {
    // console.log("任务下发");
  }
  immediateExecution(): void {
    // console.log("立即执行");
  }
  periodicExecution(): void {
    // console.log("周期执行");
  }
  crontabDo(): void {
    // console.log("定期执行");
  }
  onceRelease(): void {
    // console.log("再次下发");
  }
  handleEdit(scope: any) {
    // console.log(scope.row);
  }
  handleClose() {}
  toDefault(): void {
    // console.log("发起缺陷");
  }

  mounted() {
    // 查询表格数据
    this.queryAuxRealtimeList();
  }
}
</script>

<style lang="scss" scoped>
.defect-management-box {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem;
  .plan-header-box {
    height: 0.3rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .subtitle-box {
      height: 0.3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // .icon {
      //   width: 0.16rem;
      //   height: 0.18rem;
      // background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
      //   no-repeat center center;
      // background-size: 100% 100%;
      // }
      .name {
        font-size: 0.18rem;
        margin-left: 0.06rem;
      }
    }
  }
  .filter-box {
    height: 1.04rem;
    width: 100%;
    margin-top: 0.15rem;
    .filter-1 {
      height: 0.36rem;
      width: 100%;
      margin-top: 0.1rem;
      .elform {
        width: 100%;
        height: 100%;
      }
    }
  }
  .btn {
    margin-left: 0.32rem;
  }
      .bottom-border {
      width: 100%;
      height: 2px;
      background: linear-gradient(
        90deg,
        rgba(30, 60, 166, 1),
        rgba(255, 255, 255, 1),
        rgba(32, 62, 168, 1)
      );
      margin: 0.1rem 0;
    }
  .self-table {
    height: calc(100% - 2.64rem);
    width: 100%;
    margin-top: 0.1rem;
  }
  .self-pagination {
    width: 100%;
    height: 0.6rem;
  }
  .abnormal {
    width: 100%;
    height: 6rem;
    // background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    &-img {
      max-width: 8rem;
      max-height: 6rem;
    }
  }
}
</style>
<style lang="scss">
.defect-management-box {
  //   按钮样式
  .el-button {
    width: 1.1rem;
    height: 0.36rem;
    padding: 0;
  }
  .el-table {
    width: 100%;
    height: 100%;
  }
  // 表格修改
  // .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 0.4rem);
  //   .el-table__body {
  //     height: 94%;
  //   }
  // }
  // 表单输入样式设置
  .el-input--medium {
    font-size: 0.18rem;
  }
  .el-form-item__label {
    font-size: 0.18rem;
  }
  .el-select .el-input .el-input__inner {
    font-size: 0.18rem;
  }
}
</style>



